<template>
    <main>
        <div class="com_list">
            <div class="header_img">
                <img src="../assets/images/kq/list/dce90c30e849bf09fdbb55b397ca63f0.jpg" alt="">
            </div>
            <ul>
                <li v-for="(item,index) in com_list" >
                    <a :href="'#'+item.id" :class="{current:num==index}" @click='change(index)'><span>{{item.con}}</span></a>
                </li>
            </ul>
            <div class="com_pro">          
                <div class="header" v-for="(item,index) in list" :id='index'>
                    <div class="header_t" :id="item.id">{{item.con}}</div>
                    <div>
                        <ul class="header_li">
                            <li v-for="(item,index) in item.ul">
                                <div>{{item.name}}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="header_div3">
                        <ul class="com">
                            <li v-for="(item,index) in item.com1">
                                <div>
                                    <img :src="item.src" alt="">
                                    <div class="ico">
                                        <img src="../assets/images/kq/list/1572234761550.png" alt="">
                                    </div>
                                    <div class="com_l">
                                        <img :src="item.ico" alt="">
                                        <div>{{item.msg}}</div>
                                        <p>{{item.msg2}}</p>
                                        <div><span>累计热卖{{item.num}}万件</span></div>
                                        <div>
                                            <div><span>特卖价</span></div>
                                            <div><span>￥</span><span>{{item.price}}</span></div>
                                        </div>
                                    </div>
                                    <div class="shop"><img src="../assets/images/kq/list/8ddb221f42e2ea6ed3c1425d62a91388-btn_addcart_normal@2x.png" alt=""></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>
<script>
    export default {
        data(){
            return {
                num:0,
                com_list:[],
                list:[],
            }
        },
        mounted(){
            this.$http.get('./data/kq.json', {

            })
            .then((response)=> {
                console.log(response);
                this.list=response.data.list
                this.com_list=response.data.com_list
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });  
        },
        methods:{
            change(a){
                this.num=a
            }
        }
    }
</script>
<style scoped>
    main{
        background-color: #f0f5f9;
    }
    .header_img{
        width: 100vw;
        height: 11.867vw;
    }
    .header_img>img{
        width: 100vw;
    }
    .com_list>ul{
        background-color: #fff;
        float: left;
        width: 15vw;
        height: 100vh;
        overflow: auto;
    }
    .com_list>ul>li{
        height: 20vw;
        position: relative;
    }
    .com_list>ul>li>a{  
        display: inline-block; 
        width: 100%;  
        height: 100%;    
    }
    .com_list>ul>li>a>span{
        width: 6vw;
        display: inline-block;
        color: black;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .com_list::after{
        content: '';
        display: table;
        clear: both;
    }
    .com_pro{
        width: 85vw;
        float: right;
        height: 100vh;
        overflow: auto;
    }
    .current::after{
        content: "";
        position: absolute;
        border-left: 0.8vw solid #f34085;
        height: 100%;
    }
    .current{
        background-color: #f0f5f9 ;
    }
    .current span{
        color: #f34085 !important;
    }
    .header{
        width: 85vw;
    }
    .header_t{
        border-left: 0.5vw solid black;
        padding-left: 1.5vw;
        margin: 2vw 0 0 1vw;
    }
    .header_li::after{
        content: '';
        display: table;
        clear: both;
    }
    .header_li{
        padding: 2vw 0;
    }
    .header_li>li{
        width: 21vw;
        padding: 0.5vw;
        float: left;
    }
    .header_li>li>div{
        border: 1px solid #f34085;
        border-radius: 0.5vw;
        padding: 1vw;
        text-align: center;
    }
    .header_div3{
        padding: 0 1vw;
    }
    .com>li{
        margin-bottom: 1vw;
    }
    .com>li>div{
        padding: 1vw;
        border-radius: 2vw;
        background-color: #fff;
        position:relative
    }
    .com>li>div::after{
        content: '';
        display: table;
        clear: both;
    }
    .com>li>div>img{
        float: left;
        width: 35vw;
        height: 35vw;
        border: 1px solid #f3f3f3;
    }
    .com_l{
        width: 44vw;
        float: left;
        margin-left: 2vw;
    }
    .com_l>img{
        width: 13vw;
    }
    .com_l>div:nth-of-type(1){
        font-size: 3.5vw;
        font-weight: 900;
        white-space: nowrap; 
        text-overflow: ellipsis; 
        overflow: hidden;
    }
    .com_l>p{
        white-space: nowrap; 
        text-overflow: ellipsis; 
        overflow: hidden;
        margin-top: 1vw;
    }
    .com_l>div:nth-of-type(2)>span{
        border: 1px solid #f34085;
        padding: 0 2vw;
        border-radius: 3vw;
        color:#f34085
    }
    .com_l>div:nth-of-type(2){
        margin-top: 3vw;
    }
    .com_l>div:nth-of-type(3)>div:nth-of-type(1){
        width: 13.998vw;
        height: 6vw;
        background-image: url('../assets/images/kq/list/c145a1921487969f59fd602e3599a293-marshalling.png');
        background-size: 100% 100%;
        padding: 1vw 2vw;
        color: #fff;
        float: left;
    }
    .com_l>div:nth-of-type(3)>div:nth-of-type(2){
        height: 6vw;
        color: #fff;
        background-color: #da3d95;
        border-radius: 0 6vw 6vw 0;
        float: left;
    }
    .com_l>div:nth-of-type(3)>div:nth-of-type(2)>span:nth-of-type(2){
        font-size: 5vw;
        font-weight:600;
        line-height: 6vw;
        margin: 0 2vw 0 1.5vw;
    }
    .com_l>div:nth-of-type(3){
        margin-top: 2vw;
    }
    .shop>img{
        width: 8vw;
        position: absolute;
        right: 3vw;
        bottom: 3.5vw;
    }
    .ico>img{
        width: 8vw;
        position: absolute;
        left: 27vw;
        top:2vw;
    }
</style>